/*background element*/
.layer1
{
width:100%;
height:220px;
background: #7C92F7;
top:367px;
max-width:100%;
/*background: -moz-linear-gradient(top, blue, green);
background: -webkit-linear-gradient(top, blue, green);*/
}

/*initial properties*/
.f_wheel
{
position:relative;
float:right;
top:543px;
right:-429px;
/*left:111%;*/
}
.b_wheel
{
position:relative;
float:right;
top:543px;
right:-637px;
}

/*bus properties including animation*/
.bus
{
position:relative;
top:497px;
float:right;
right:100px;
/*left:75%;*/
animation: moveBus 10s infinite linear forwards;
-moz-animation: moveBus 10s infinite linear forwards; /* Firefox */
-webkit-animation: moveBus 10s infinite linear forwards; /* Safari and Chrome */
}

/*animations*/
@keyframes spinWheel
{
from { transform: translateX(200%) rotate(2880deg); }
to { transform: translateX(-3730%) rotate(0deg); }
}

@-moz-keyframes spinWheel /* Firefox */
{
from { -moz-transform: translateX(200%) rotate(2880deg); }
to { -moz-transform: translateX(-3730%) rotate(0deg); }
}

@-webkit-keyframes spinWheel /* Safari and Chrome */
{
from { -webkit-transform: translateX(200%) rotate(2880deg); }
to { -webkit-transform: translateX(-3730%) rotate(0deg); }
} 

@keyframes moveBus
{
from { transform: translateX(200%); }
to { transform: translateX(-450%); }
}

@-moz-keyframes moveBus /* Firefox */
{
from { -moz-transform: translateX(200%); }
to { -moz-transform: translateX(-450%); }
}

@-webkit-keyframes moveBus /* Safari and Chrome */
{
from { -webkit-transform: translateX(200%); }
to { -webkit-transform: translateX(-450%); }
}

/*wheel animation*/
.f_wheel, .b_wheel
{
animation: spinWheel 10s infinite linear forwards;
-moz-animation: spinWheel 10s  infinite linear forwards; /* Firefox */
-webkit-animation: spinWheel 10s  infinite linear forwards; /* Safari and Chrome */
}